<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>焦点图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        a {
            line-height: 80px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            font-size: 40px;
        }
        
        .box {
            width: 800px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 30px auto;
        }
        
        .imgTab {
            position: absolute;
            left: 0;
            top: 0;
            width: 500%;
        }
        
        .imgTab li {
            float: left;
        }
        
        .imgTab img {
            width: 800px;
            height: 400px;
            vertical-align: top;
        }
        
        .tabLinks {
            text-align: center;
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 10px;
        }
        
        .tabLinks a {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: yellowgreen;
        }
        
        .tabLinks .active {
            background-color: red;
        }
        
        .prev,
        .next {
            position: absolute;
            width: 40px;
            top: 50%;
            height: 80px;
            margin-top: -40px;
            background-color: rgba(255, 0, 0, .5);
            z-index: 4;
        }
        
        .prev {
            left: 10px;
        }
        
        .next {
            right: 10px;
        }
        
        h3 {
            text-align: center;
        }
        
        .wrap {
            width: 464px;
            margin: 0 auto;
            background-color: #666;
            border: 1px solid black;
            height: 192px;
        }
        
        .wrap ul {
            list-style: none;
            clear: both;
        }
        
        .wrap ul li.active {
            background-color: red;
        }
        
        .wrap ul li {
            float: left;
            width: 92px;
            line-height: 40px;
            text-align: center;
            margin: 10px;
            background-color: greenyellow;
            border: 2px solid blueviolet;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="imgTab" id="imgTab">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
        <div class="tabLinks" id="tabLinks">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
        <a href="javascript:;" class="prev" id="prev">&lt;</a>
        <a href="javascript:;" class="next" id="next">&gt;</a>
    </div>

    <h3>Tween.js</h3>
    <div class="wrap">
        <ul id="types">
            <li>Linear</li>
            <li>Quad</li>
            <li>Cubic</li>
            <li>Quart</li>
            <li>Quint</li>
            <li>Sine</li>
            <li>Expo</li>
            <li>Circ</li>
            <li>Elastic</li>
            <li>Back</li>
            <li>Bounce</li>
        </ul>
    </div>

    <button id="btn">点击</button>
</body>
<script src="js/tween.js"></script>
<script>
    var oImgTab = document.getElementById('imgTab');
    var oLi = document.getElementsByTagName('li')[0];
    var oAs = document.getElementById('tabLinks').getElementsByTagName('a');
    var preBtn = document.getElementById('prev');
    var nextBtn = document.getElementById('next');
    var oTypes = document.getElementById('types').getElementsByTagName('li');
    // tween.js 所有的样式
    var typesArr = [
        'Linear',
        'Quad',
        'Cubic',
        'Quart',
        'Quint',
        'Sine',
        'Expo',
        'Circ',
        'Elastic',
        'Back',
        'Bounce'
    ];

    // 存放当前激活的图片
    var activeImg = 0;

    for (var i = 0; i < oTypes.length; i++) {
        oTypes[i].index = i;
        oTypes[i].onclick = function() {
            for (var i = 0; i < oTypes.length; i++) {
                oTypes[i].className = '';
            }
            this.className = 'active';
            var fn = changeTypeFn(typesArr[this.index]);
            init(fn);
        }
    }


    function getStyle(obj, attr) {
        return (obj.currentStyle || getComputedStyle(obj, false))[attr];
    }

    function init(moveFn) {
        for (var i = 0; i < oAs.length; i++) {
            oAs[i].index = i;
            oAs[i].onclick = function() {
                activeImg = this.index;
                for (var i = 0; i < oAs.length; i++) {
                    oAs[i].className = '';
                }
                this.className = 'active';
                moveFn();
            }
        }

        preBtn.onclick = function() {
            activeImg--;
            if (activeImg <= 0) activeImg = 0;
            for (var i = 0; i < oAs.length; i++) {
                oAs[i].className = '';
            }
            oAs[activeImg].className = 'active';
            moveFn();
        }

        nextBtn.onclick = function() {
            activeImg++;
            if (activeImg >= 4) activeImg = 4;
            for (var i = 0; i < oAs.length; i++) {
                oAs[i].className = '';
            }
            oAs[activeImg].className = 'active';
            moveFn();
        }
    }

    function changeTypeFn(type) {
        return function tweenMove() {
            clearInterval(oImgTab.timer);
            var t = 0,
                b = parseInt(getStyle(oImgTab, 'left')),
                c = (-activeImg * oLi.offsetWidth) - b,
                d = 30;
            oImgTab.timer = setInterval(function() {
                t++;
                if (t == d) clearInterval(oImgTab.timer);
                if (type == 'Linear') oImgTab.style.left = Tween[type](t, b, c, d) + 'px';
                else oImgTab.style.left = Tween[type].easeOut(t, b, c, d) + 'px';
            }, 30);
        }
    }

    for (var i = 0; i < 100; i++) {
        document.getElementById('btn').onclick = function() {
            console.log('1');
        }
    }
</script>

</html>